<template>
  <div class="container">
    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="content" label="内容" />
    </el-table>

    <!-- 新增按钮 -->
    <el-button type="primary" @click="showDialog" style="margin-top: 20px">新增</el-button>

    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogVisible" title="新增内容" width="70%">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        
        <el-form-item label="内容">
          <!-- WangEditor 富文本编辑器 -->
          <div style="border: 1px solid #ccc; margin-top: 10px;">
            <!-- <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden;"
              v-model="formData.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            /> -->
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, shallowRef, onBeforeUnmount } from 'vue'
//import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//import '@wangeditor/editor/dist/css/style.css' // 引入 css

export default {
//  components: { Editor, Toolbar },
  setup() {
    const dialogVisible = ref(false)
    const tableData = ref([
      // 示例数据
      { title: '示例标题1', content: '<p>示例内容1</p>' },
      { title: '示例标题2', content: '<p>示例内容2</p>' }
    ])
    
    const formData = ref({
      title: '',
      content: ''
    })

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    
    // 编辑器配置
  
    const toolbarConfig = {
  // 排除不需要的菜单项
  excludeKeys: [
    'group-video',
    'insertTable',
    'codeBlock'
  ]
}
   
    const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload-img', // 上传图片接口
      fieldName: 'image'
    }
  }
}
    const mode = 'default' // 或 'simple'

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例
    }

    const showDialog = () => {
      formData.value = { title: '', content: '' }
      dialogVisible.value = true
    }

    const handleSubmit = () => {
      // 添加到表格数据
      tableData.value.push({
        title: formData.value.title,
        content: formData.value.content
      })
      dialogVisible.value = false
    }

    return {
      dialogVisible,
      tableData,
      formData,
      editorRef,
      toolbarConfig,
      editorConfig,
      mode,
      handleCreated,
      showDialog,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>